.preCon {
  display: flex;
  margin-top: 15px;
  flex-wrap: wrap;
  justify-content: space-between;

  &:after {
    content: "";
    width: 32%;
  }


  .preImg {
    width: 32%;position: relative;margin-top: 5px;
    animation: bounceIn 1.2s ease-in-out;
    img{
      width: 100%;
    }
    .preMask{
      position: absolute;
      top: 0;right: 0;bottom: 0;left: 0;
      display: flex;align-items: center;justify-content: center;
      color: #fff;background: rgba(0, 0, 0, 0.5);
      cursor: pointer;
      opacity: 0;transition: opacity 0.3s;
      .preIcon{
        font-size: 20px;
        margin: 0 5px;
      }
    }
    &:hover{
      .preMask{
        opacity: 1;
      }
    }
  }
}
.prompt{
  font-size: 12px;margin-left: 15px;
}

@keyframes bounceIn {
  0%,20%,40%,60%,80%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000);transition-timing-function:cubic-bezier(0.215,.610,.355,1.000)}
  0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
  20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
  40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
  60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
  80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}
  100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
